<template>
  <div class="class-list">
    <el-table :data="tableData" style="width: 100%;">
      <el-table-column fixed prop="class_name" label="班级名称" min-width="200"/>
      <el-table-column prop="class_type" label="班级类型" min-width="100">
        <template #default="scope">{{ CLASS_TYPE[scope.row.class_type]!==undefined ? CLASS_TYPE[scope.row.class_type] : '其他'}}</template>
      </el-table-column>
      <el-table-column prop="course_info.course_name" label="课程名称" min-width="200"/>
      <el-table-column prop="teacher_info.name" label="班主任" min-width="80"/>
      <el-table-column prop="lecturer_info.name" label="讲师"  min-width="80"/>
      <el-table-column prop="start_date" label="开始时间"  min-width="100"/>
      <el-table-column prop="end_date" label="结束时间"  min-width="100"/>
      <el-table-column prop="status" label="班级状态"  min-width="80">
        <template #default="scope">{{ CLASS_STATUS[scope.row.status]!==undefined ? CLASS_STATUS[scope.row.status] : '其他'}}</template>
      </el-table-column>
      <el-table-column fixed="right"  label="操作"  min-width="100">
        <template #default="scope">
          <el-button link type="primary" size="default"  v-for="(button, index) in buttonsInfo.buttons" :key="index" @click="button.onClick(scope.row)">
            {{button.text}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-container">
      <PageSelect
          :pageInfo="pageDetailInfo"
          :totalCount="totalCount"
          @update:pageInfo="handlePageInfoUpdate"
      />
    </div>
  </div>
</template>

<script setup>

import {CLASS_STATUS, CLASS_TYPE} from "@/dict/dict-class-info";
import {onMounted, ref, watch} from "vue";
import {getClassesByStatusAndPageAPI} from "@/network/class/class";
import eventBus from "@/plugins/event-bus";
import PageSelect from "@/components/common/PageSelect.vue";

const props = defineProps({
      buttons:{
        type:Array,
        required: true,
      },
      statusList:{
        type: Array,
        required:true,
      }
    }
)
const buttonsInfo = ref({ ...props })
const emit = defineEmits(['update:buttonsValue'])
watch(buttonsInfo, (newVal) => {
  emit('update:buttonsValue', newVal);
}, { deep: true });


let tableData = ref([]);
const pageDetailInfo = ref({
  currentPage: 1,
  pageSize: 10,
})

const totalCount = ref(0);

const handlePageInfoUpdate = () => {
  showClassesInfo()
};

const showClassesInfo = () => {
  const data = {
    query_base: {
      skip: pageDetailInfo.value.currentPage,
      limit: pageDetailInfo.value.pageSize
    },
    status_list:buttonsInfo.value.statusList
  }

  getClassesByStatusAndPageAPI(data).then(res=>{
    totalCount.value = res.data.total_count
    tableData.value = res.data.data
  })
}

onMounted(()=>{
  showClassesInfo()
})

eventBus.on("update-classes-event",()=>{
  showClassesInfo()
})
</script>

<style scoped lang="less">
.class-list{
  padding: 30px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  // 让子标签的表格位于中间
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-wrap: wrap; // 定义换行
  .page-container {
    margin-top: 20px;
  }
}
</style>
